<template>
	<view class="home-container">
		<!-- 顶部用户信息区域 -->
		<UserInfoHeader :is-home="true"/>

		<!-- 在线问诊统计 -->
		<view class="mar-0-0-32r-0">
			<view class="section-title">在线问诊统计</view>
			<view class="stats-card">
				<view class="stat-item">
					<view class="stat-number">230</view>
					<view class="stat-label">问诊数</view>
				</view>
				<view class="stat-divider"></view>
				<view class="stat-item">
					<view class="stat-number">100</view>
					<view class="stat-label">接诊数</view>
				</view>
				<view class="stat-divider"></view>
				<view class="stat-item">
					<view class="stat-number">25%</view>
					<view class="stat-label">接诊率</view>
				</view>
				<view class="stat-divider"></view>
				<view class="stat-item">
					<view class="stat-number">20</view>
					<view class="stat-label">待接诊</view>
				</view>
			</view>
		</view>

		<!-- 今日门诊统计 -->
		<view class="mar-0-0-32r-0">
			<view class="section-title">今日门诊统计</view>
			<view class="stats-card second">
				<view class="stat-item">
					<view class="stat-number">230</view>
					<view class="stat-label">今日预约</view>
				</view>
				<view class="stat-divider"></view>
				<view class="stat-item">
					<view class="stat-number">100</view>
					<view class="stat-label">已完成</view>
				</view>
				<view class="stat-divider"></view>
				<view class="stat-item">
					<view class="stat-number">60</view>
					<view class="stat-label">候诊中</view>
				</view>
				<view class="stat-divider"></view>
				<view class="stat-item">
					<view class="stat-number">20</view>
					<view class="stat-label">未签到</view>
				</view>
			</view>
		</view>

		<!-- 认证卡片 -->
		<view class="certification-section">
			<view class="cert-card doctor-cert">
				<image class="cert-bg" src="../../static/doctorCertification-bg.png"></image>
				<view class="cert-content">
					<view class="cert-title">医生认证</view>
					<view class="cert-action">去认证 ></view>
				</view>
			</view>
			<view class="cert-card ca-cert">
				<image class="cert-bg" src="../../static/CACertification-bg.png"></image>
				<view class="cert-content">
					<view class="cert-title">CA认证</view>
					<view class="cert-action">去认证 ></view>
				</view>
			</view>
		</view>

		<!-- 最新待办 -->
		<view class="todo-section">
			<view>
				<image class="todo-title-bg" src="../../static/toBeDone-bg.png"></image>
				<view class="pad-18r-32r between-align">
					<view class="todo-title">最新待办</view>
					<view class="todo-count">
						<text>12条待办</text>
						<text class="arrow">></text>
					</view>
				</view>
			</view>
			<view class="todo-list">
				<view v-for="(item,index) in listToDo" :key="index" class="todo-item">
					<view class="todo-content">{{item.name}}</view>
					<view class="todo-time">{{item.createTime}}</view>
				</view>
			</view>
		</view>

		<!-- 常用工具 -->
		<view class="tools-section">
			<view class="section-title">常用工具</view>
			<view class="tools-grid">
				<view v-for="(item,index) in listNormalTool" :key="index" class="tool-item" @click="toPage(item)">
					<u--image v-if="item.src" :src="baseURL+item.src" width="57rpx" height="57rpx" radius="16rpx"></u--image>
					<view v-else class="tool-icon" :class="'tool-' + (index + 1)"></view>
					<view class="tool-name">{{item.name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import UserInfoHeader from '../../components/UserInfoHeader.vue';
	export default {
		components: {
			UserInfoHeader,
		},
		computed: {
			...mapGetters(['baseURL', 'userInfo']),
		},
		data() {
			return {
				pageName: '首页',
				item: {
					name: '肖明明',
					deptName: '骨科',
					jobTitle: '副主任医师'
				},
				listToDo: [{
						name: "你有新的在线问诊待接诊",
						createTime: "2025-07-09 12:50:45"
					},
					{
						name: "你有处方被驳回",
						createTime: "2025-07-09 12:50:45"
					}
				],
				listNormalTool: [{
						name: "电子处方",
						src: '/img/doctorWorkBench/20250903011914523---E-prescription-icon.png',
						path: '/pages/prescription/ElePrescription'
					},
					{
						name: "电子病历",
						src: '/img/doctorWorkBench/20250903012132031---E-medicalRecord-icon.png',
						path: '/pages/ElectronicmMedicalRecord/EMRMain'
					}, {
						name: "义诊",
						src: '/img/doctorWorkBench/20250903012200479---freeClinic-icon.png',
					}, {
						name: "随访",
						src: '/img/doctorWorkBench/20250903012211384---follow-icon.png',
					}, {
						name: "舌诊",
						src: '/img/doctorWorkBench/20250903012226585---tongueDiagnosis-icon.png',
					}, {
						name: "医废登记",
						src: '',
						path: 'yfdj'
					}
				]
			}
		},
		mounted() {
		},
		methods: {
			toPage(item){
				if(item.path=='yfdj'){
					uni.$u.route('/pages/medicalWaste/MedicalWaste', item);
				}else if(item.path){
			       	uni.$u.route(item.path, item);	
				}
				
			}
		}
	}
</script>

<style scoped>
	.home-container {
		min-height: 100vh;
		padding: 32rpx;
	}

	/* 统计区域 */
	.section-title {
		font-size: 32rpx;
		font-weight: 400;
		color: #333;
		margin-bottom: 40rpx;
		position: relative;
	}
	.section-title::after {
		content: '';
		position: absolute;
		bottom: -8rpx;
		left: 0;
		width: 44rpx;
		height: 8rpx;
		background: linear-gradient(90deg, #41CFE6 0%, #14A5FF 100%);
		border-radius: 414rpx;
	}

	.stats-card {
		background: #F3F7FF;
		border-radius: 20rpx;
		padding: 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	}

	.stats-card.second {
		background: linear-gradient(90deg, #EBFEFF 0%, #E3EDFF 100%);
	}

	.stat-item {
		text-align: center;
		flex: 1;
	}

	.stat-number {
		font-size: 44rpx;
		font-weight: 500;
		color: #171B2B;
		margin-bottom: 18rpx;
	}

	.stat-label {
		font-size: 24rpx;
		color: #828B96;
	}

	.stat-divider {
		width: 2rpx;
		height: 36rpx;
		background: #D8D8D8;
		margin: 0 26rpx;
		opacity: 0.8;
	}

	/* 认证卡片 */
	.certification-section {
		display: flex;
		gap: 26rpx;
		margin-bottom: 32rpx;
	}

	.cert-card {
		flex: 1;
		border-radius: 16rpx;
		padding: 24rpx;
		overflow: hidden;
		position: relative;
	}

	.cert-bg {
		height: 160rpx;
		width: 330rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.cert-content {
		display: flex;
		flex-direction: column;
	}

	.cert-title {
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
		margin-bottom: 26rpx;
	}

	.cert-action {
		font-size: 28rpx;
		color: #999999;
	}

	/* 待办事项 */
	.todo-section {
		border-radius: 20rpx;
		margin-bottom: 32rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
		position: relative;
	}

	.todo-title-bg {
		height: 128.79rpx;
		width: 686rpx;
		position: absolute;
		z-index: -1;
		object-fit: cover;
	}

	.todo-title {
		font-size: 32rpx;
		font-weight: bold;
		color: white;
	}

	.todo-count {
		display: flex;
		align-items: center;
		gap: 8rpx;
		color: rgba(255, 255, 255, 0.9);
		font-size: 28rpx;
	}

	.arrow {
		font-weight: bold;
	}

	.todo-list {
		background: white;
		border-radius: 16rpx;
		padding: 24rpx;
		gap: 48rpx;
	}

	.todo-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16rpx 0;
	}

	.todo-item:last-child {
		border-bottom: none;
	}

	.todo-content {
		font-size: 28rpx;
		color: #333;
		flex: 1;
	}

	.todo-time {
		font-size: 24rpx;
		color: #999;
	}

	/* 常用工具 */
	.tools-section {
		background: white;
		border-radius: 20rpx;
		padding: 24rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	}

	.tools-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 40rpx;
		margin-top: 24rpx;
	}

	.tool-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12rpx;
	}

	.tool-icon {
		width: 56rpx;
		height: 56rpx;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tool-1 {
		background: linear-gradient(135deg, #FF8EBB 0%, #FE5196 100%);
	}

	.tool-2 {
		background: linear-gradient(135deg, #ADCCFC 0%, #3283FF 100%);
	}

	.tool-3 {
		background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
	}

	.tool-4 {
		background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
	}

	.tool-5 {
		background: linear-gradient(135deg, #00bcd4 0%, #0097a7 100%);
	}

	.tool-6 {
		background: linear-gradient(135deg, #9c27b0 0%, #7b1fa2 100%);
	}

	.tool-name {
		font-size: 24rpx;
		color: #000;
		text-align: center;
	}
</style>